<template>
  <div class="dialog">
    <div class="dialog-con noticeContainer">
      <p>采购打款申请</p>
      <div class="notice-info">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item :required="true" label="选择审批人">
            <approve-select v-on:commitApproval="commitApproval"></approve-select>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item label="打款日期" prop="remitDate">
                <el-date-picker
                  size="medium"
                  v-model="ruleForm.remitDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="打款类型" prop="remitType">
                <el-select v-model="ruleForm.remitType" placeholder="请选择" size="medium">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="打款银行" prop="remitBank">
                <el-input v-model="ruleForm.remitBank" size="medium"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="打款金额" prop="remitMoney">
                <el-input-number v-model="ruleForm.remitMoney" :controls="false" :min="0"
                                 :precision="2"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input type="textarea" v-model="ruleForm.approveIdea" size="medium"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="剩余金额">
                <el-input v-model="restMoney" size="medium"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收款公司">
                <el-input v-model="noticeVal.supplyName" readonly size="medium"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收款账号">
                <el-input v-model="noticeVal.supplyAccount" readonly size="medium"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="12">
            <el-form-item label="开户行">
              <el-input v-model="noticeVal.supplyAccountName" readonly size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打款公司">
              <el-input v-model="noticeVal.companyName" readonly size="medium"></el-input>
            </el-form-item>
          </el-col>

          <el-form-item style="width:100%;text-align:center">
            <el-button type="primary" @click="submitForm('ruleForm')" size="medium" style="margin-right:10px;">创建
            </el-button>
            <el-button @click="CancelNotice" size="medium">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import ApproveSelect from 'components/common/ApproveSelect'
  import {localStorage} from "js/localStorage"
  import api from "js/service"

  export default {
    inject: ["reload"],
    components: {
      ApproveSelect
    },
    data() {
      return {
        options: [
          {value: '1', label: '全款'},
          {value: '2', label: '预付款'},
          {value: '3', label: '尾款'},
          {value: '4', label: '质保金'},
          {value: '5', label: '其他'},
        ],
        userId: '',
        companyData: [],
        restMoney: 0,
        approvalData: {},
        ruleForm: {
          remitDate: '',
          companyId: '',
          companyName: '',
          remitBank: '',
          remitMoney: '',
          supplyId: '',
          supplyName: '',
          suppluAccount: '',
          supplyAccountName: '',
          remitType: '',
          approveId: '',
          approveIdea: '',
          approveStatus: ''
        },
        rules: {
          remitDate: [
            {required: true, message: '请选择打款日期', trigger: 'blur'},
          ],
          remitType: [
            {required: true, message: '请选择打款类型', trigger: 'change'},
          ],
          remitBank: [
            {required: true, message: '请输入打款银行', trigger: 'change'},
          ],
          remitMoney: [
            {required: true, message: '请输入打款金额', trigger: 'change'},
          ],
        }
      }
    },
    props: {
      noticeVal: {
        type: Object,
        default: {}
      }
    },
    created() {
      console.log(this.noticeVal,"%%%%%%%%")
      if (!this.noticeVal.giveMoney) {
        this.noticeVal.giveMoney = 0;
      }
      this.restMoney = this.noticeVal.totalPrice - this.noticeVal.giveMoney;
      if (this.noticeVal.adjustMoney) {
        this.restMoney = this.calculate.operation(this.noticeVal.adjustMoney, this.noticeVal.giveMoney, '-');
      }
      this.ruleForm.remitBank = this.noticeVal['companyAccountBank'];

      this.userId = localStorage.get('userID')
    },
    methods: {
      commitApproval(approvalData) {
        this.approvalData = approvalData;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.confirmNotice()
          } else {
            return false;
          }
        });
      },
      confirmNotice() {
        if (this.ruleForm.remitMoney > this.restMoney) {
          this.$message.warning("打款金额不能超过剩余打款金额！");
          return;
        }

        if (this.ruleForm.remitMoney < 1) {
          this.$message.warning("打款金额不能小于1");
          return;
        }


        if (!this.approvalData.type) {
          this.tips.MessageModal('warning', "请选择审批人！");
          return;
        }
        if (this.approvalData.type === 'error') {
          this.tips.MessageModal('warning', this.approvalData.msg);
          return;
        }
        let params = {
          purBillsId: this.noticeVal.purBillsId,
          remitDate: this.ruleForm.remitDate,
          companyName: this.noticeVal.companyName,
          remitBank: this.ruleForm.remitBank,
          remitMoney: this.ruleForm.remitMoney,
          supplyName: this.noticeVal.supplyName,
          supplyAccountName: this.noticeVal.supplyAccountName,
          supplyAccount: this.noticeVal.supplyAccount,
          remitType: this.ruleForm.remitType,
          companyId: this.noticeVal.companyId,
          supplyId: this.noticeVal.supplyId,
          approveIdea: this.ruleForm.approveIdea,
          userId: this.userId,
          type: 1,
          approveId: JSON.stringify(this.approvalData.valueArray)
        };
        let success = data => {
          if (data.code === "OK") {
            this.$message.success("添加成功");
            this.$emit("closeTip");
          } else {
            this.$message.error(data.msg);
          }
        };
        api.purInvoiceremitAdd(params, success);
      },
      CancelNotice() {
        this.$emit("closeTip")
      }
    }
  }
</script>
<style scoped>
  .noticeContainer .el-form-item {
    margin-bottom: 14px;
  }
</style>

<style lang="scss" scoped>
  .noticeContainer {
    width: 700px;
    height: 500px;

    p {
      width: 100%;
      text-align: center;
      background: #eee;
      line-height: 45px;
    }

    .notice-info {
      margin: 10px 0;

      .el-input-number {
        width: 220px;
      }

      .el-select {
        width: 220px;
      }

      .el-input {
        width: 220px;
      }

      .el-textarea {
        width: 220px;
      }
    }
  }
</style>


